.
<template>
  <div class="main">
    <div class="main-left" v-loading="treeLoading" element-loading-text="相机接入中...">
      <el-input style="width: 220px" placeholder="请输入" v-model="filterText" @input="filterChange">
        <template #prefix>
          <el-icon>
            <search/>
          </el-icon>
        </template>
      </el-input>
      <div style="overflow-y: scroll" :style="{ height: clientHeight - 200 + 'px' }">
        <el-tree style="width: 240px" ref="popularTree" :data="terrList" node-key="id"
                 :props="defaultProps" highlight-current :default-expanded-keys="defaultExpandedKeys"
                 :filter-node-method="filterNode" @node-click="handleNodeClick">
          <template #default="{ node }">
            <p v-if="node.data.dataType === 'camera'" class="flex-center">
              <el-image v-if="node.data.cameraType === 'ball'" class="icon-img" src="/tree/ball.png"></el-image>
              <el-image v-else-if="node.data.cameraType === 'gun'" class="icon-img" src="/tree/gun.png"></el-image>
              <span v-if="node.data.isOnline === 'f'" style="color: #c9c8c8">&nbsp;{{ node.label }}&nbsp;</span>
              <span v-else style="color: #2d6cf3">&nbsp;{{ node.label }}&nbsp;</span>
              <el-image v-if="node.data.isAlarm === 'f'" class="icon-img" src="/tree/f.png"></el-image>
              <el-image v-else-if="node.data.isAlarm === 't'" class="icon-img" src="/tree/t.png"></el-image>
            </p>
            <p v-else-if="node.data.dataType === 'nvr'" class="flex-center">
              <el-icon>
                <CreditCard/>
              </el-icon>
              <span>{{ node.label }}</span>
            </p>
            <p v-else class="flex-center">
              <span>{{ node.label }}</span>
            </p>
          </template>
        </el-tree>
      </div>
    </div>
    <div style="width: 100%">
      <HikControlVideo :option="option" :treeLoading="treeLoading" ref="histrovgbslive" @loging="initlogin"></HikControlVideo>
    </div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import HikControlVideo from "@/views/historyVideo/controlVideo.vue";
import baseService from "@/service/baseService";
import {filterTreeDatakk, removeNodesByType} from "@/utils/treedatatreating";

const defaultProps = {
  children: "children",
  label: "addr"
};

export default defineComponent({
  components: {
    HikControlVideo
  },
  setup() {
    const state = reactive({
      clientHeight: document.body.clientHeight,
      treeLoading: true,
      loadingCount: 0,
      filterText: "",
      terrList: [],
      defaultProps,
      option: {},
      nvrMap: new Map(),
      dhShow: false,
      defaultExpandedKeys: [], // 初始为空数组
      nvripdata: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  watch: {
  },
  mounted() {
    this.getNvrTree();
    setTimeout(() => {
      this.treeLoading = false;
      this.loadingCount = 0;
    }, 1000 * 30)
  },
  methods: {
    // 获取树形数据
    getNvrTree() {
      baseService.get("/Nvr/kxnvr/getNvrTree").then((stat) => {
        let terrList = removeNodesByType(stat.data, "hk-mn-zt");
        // 过滤空的硬盘录像机
        this.terrList = filterTreeDatakk(terrList)
        this.getAllKeys(this.terrList);
        let list = this.flattenTreeToList(this.terrList);
        this.treeLoading = false;
      });
    },
    // 默认展开
    getAllKeys(nodes) {
      nodes.forEach((node) => {
        this.defaultExpandedKeys.push(node.id);
        if (node.children && node.children.length) {
          this.getAllKeys(node.children);
        }
      });
    },
    filterChange() {
      // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
      this.$refs.popularTree.filter(this.filterText);
    },
    filterNode(value, data, node) {
      if (!value) return true;
      if (!value) return true;
      let parentNode = node.parent;
      let labels = [node.label];
      let level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },
    treeLoadingIsShow() {
      this.loadingCount--;
      if (this.loadingCount <= 0) {
        this.treeLoading = false;
      }
    },
    flattenTreeToList(tree) {
      const list = [];
      function traverse(nodes) {
        nodes.forEach((node) => {
          list.push(node);
          if (node.children && node.children.length > 0) {
            traverse(node.children);
          }
        });
      }

      traverse(tree);
      return list;
    },
    handleNodeClick(data) {
      this.option = data;
      if (data.dataType === "camera") {
        console.log("mep信息");
        console.log(data);
        this.$refs.histrovgbslive.cameraData = data;
      }
    }
  }
});
</script>

<style scoped>
.main {
  display: flex;
  width: 100%;
  height: 82vh;
  overflow: hidden;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-img {
  width: 16px;
  height: 16px;
}
</style>
